<template>
  <div>
    <el-table
        :data="tableData"
        :class="{tableTopLevel1: topLevel === 1, tableTopLevel2: topLevel === 2, tableTopLevel3: topLevel === 3, tableTopLevelDefault: topLevel === -1}"
        row-key="id"
        border
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="操作人"
      >
      </el-table-column>
      <el-table-column
          prop="opName"
          label="干了啥"
          >
      </el-table-column>
      <el-table-column
          prop="requestUrl"
          label="请求接口"
          >
      </el-table-column>
      <el-table-column
          prop="requestIp"
          label="请求IP"
          >
      </el-table-column>
      <el-table-column
          prop="requestParam"
          label="请求参数"
          >
      </el-table-column>
      <el-table-column
          prop="requestResult"
          label="请求结果"
          >
      </el-table-column>
    </el-table>
    <PageC
            :top-level="topLevel"
            :handleSizeChange="handleSizeChange"
            :handleCurrentChange="handleCurrentChange"
            :pageSize="pageSize"
            :total="total"
            :currentPage="currentPage"></PageC>
  </div>
</template>

<script>
  import PageC from "@/components/PageC";
  import {deleteSysOpLogById, getSysOpLogs} from "@/api/sysOpLog";
  import {Message} from "element-ui";
  export default {
    name: "SysOpLogTable",
    components: {PageC},
    computed: {
      tableData: {
        get() {
          return this.$store.state.sysOpLog.tableData;
        },
        set(value) {
          this.$store.state.sysOpLog.tableData = value;
        }
      },
      // 选中行id
      multipleSelection: {
        get() {
          return this.$store.state.sysOpLog.multipleSelection;
        },
        set(value) {
          this.$store.state.sysOpLog.multipleSelection = value;
        }
      },
      total: {
        get() {
          return this.$store.state.sysOpLog.total;
        },
        set(value) {
          this.$store.state.sysOpLog.total = value;
        }
      },
      pageSize: {
        get() {
          return this.$store.state.sysOpLog.pageSize;
        },
        set(value) {
          this.$store.state.sysOpLog.pageSize = value;
        }
      },
      currentPage: {
        get() {
          return this.$store.state.sysOpLog.currentPage;
        },
        set(value) {
          this.$store.state.sysOpLog.currentPage = value;
        }
      }
    },
    props: {
      topLevel: {
        required: false,
        default: -1,
        type: Number
      },
      editShow: {
        required: true,
        default: false,
        type: Boolean
      },
      delShow: {
        required: true,
        default: false,
        type: Boolean
      },
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val.map((item) => {return item.id;})
      },
      getSysOpLogs(params) {
        if (! params) {
          params = {
            "current": this.currentPage,
            "size": this.pageSize
          };
        } else {
          params.current = this.currentPage;
          params.size = this.pageSize;
        }
        // 刷新
        getSysOpLogs(params).then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
      },
      editSysOpLog(id) {
        this.$store.dispatch("sysOpLog/editSysOpLog", id);
      },
      deleteSysOpLog(id) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSysOpLogById(id).then((res) => {
            Message.success(res.data.msg);
            this.getSysOpLogs();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getSysOpLogs();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getSysOpLogs();
      }
    },
    created() {
      this.getSysOpLogs();
    }
  }
</script>

<style scoped>

</style>
